<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title></title>
<!-- bootstrap3 -->
<link
	href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link href="static/common.css" rel="stylesheet" /> -->
</head>

<body class="container">
	<br />
	<hr />
	<div id="app">

		<div class="form-group">
			<div class="col-sm-12">
				<button @click="addTable" class="btn btn-primary">新增数据表</button>
				<button @click="genCode" class="btn btn-danger">生成JPA代码</button>
			</div>
		</div>
		<br /> <br />
		<hr />
		<div class="form-horizontal col-lg-12 form-inline">

			<div class="form-group">
				<label class="col-sm-4 control-label">groupId</label>
				<div class="col-sm-4">
					<input v-model="groupId" class="form-control" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-5 control-label">artifactId</label>
				<div class="col-sm-4">
					<input v-model="artifactId" class="form-control" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-6 control-label">package name</label>
				<div class="col-sm-4">
					<input v-model="packageName" class="form-control" />
				</div>
			</div>
		</div>
		<br /> <br />
		<hr />
		<div @click="activeIndex=index" :key="index" class="col-lg-4"
			v-for="(item,index) in dbTable">
			<div
				:class="['panel', 'panel-'+(activeIndex==index?'primary':'default')]">
				<div class="panel-heading">

					<div class="row">
						<div class="col-md-10">
							<label>表名：<input style="color: gray; width: 150px;"
								v-model="item.tableName"></label> <br />
							<button class="btn btn-default btn-xs">生成mysql</button>
							<button @click="getEntity(index)" class="btn btn-default btn-xs">生成entity</button>
							<button @click="getRepository(index)"
								class="btn btn-default btn-xs">生成repository</button>
							<button @click="getService(index)" class="btn btn-default btn-xs">生成service</button>
							<button class="btn btn-default btn-xs">生成control</button>
						</div>
						<div class="col-md-2 text-right">
							<span @click.stop="removeTable(index)"
								class="glyphicon glyphicon-remove g-pointer text-defualt"></span>
						</div>
					</div>
				</div>
				<div class="panel-body">
					<table class="table table-hover">
						<thead>
							<tr>
								<th width="40%">列名</th>
								<th>数据类型</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr :key="rowIndex" v-for="(row,rowIndex) in item.tableCol">
								<td><input v-model="row.colName" class="form-control" /></td>
								<td><select v-model="row.colType" class="form-control">
										<option :key="i" v-for="(key,i) in dataType" :value="key"
											v-text="key"></option>
								</select></td>
								<td><label @click.stop="removeCol(index,rowIndex)"
									class="glyphicon glyphicon-remove g-pointer text-danger" /> <label
									@click.stop="removeColUp(index,rowIndex)"
									class="glyphicon glyphicon-arrow-up g-pointer text-danger" />
									<label @click.stop="removeColDown(index,rowIndex)"
									class="glyphicon glyphicon-arrow-down g-pointer text-danger" /></td>
							</tr>

						</tbody>
						<td><button @click.stop="addCol(index)"
								class="btn btn-primary">添加列</button></td>
					</table>

				</div>
			</div>

		</div>

		<div class="col-lg-12">
			<div class="panel panel-primary ">
				<div class="panel-heading">
					<h3 class="panel-title">代码显示器</h3>
				</div>
				<div class="panel-body">
					<pre >
				        {{codeText}}
				    </pre>
				</div>
			</div>
		</div>
	</div>
</body>
<!-- vue -->
<!-- <script src="https://cdn.bootcss.com/vue/2.6.11/vue.common.dev.js"></script> -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.1/axios.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> -->
<!--<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>

	<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/qs/6.9.1/qs.min.js"></script>-->

<!--<script src="app.js"></script>-->
<script>
		new Vue({
			el: "#app",
			data: function() {
				return {
					dbTable: [{
						tableName: "userInfo",
						tableCol: [{
							colName: "userName",
							colType: "String"
						}]
					}],
					dataType: [
						"String",
						"Integer",
						"Boolean",
						"Date",
					],
					activeIndex: 0,
					packageName: 'com.demo',
					groupId: 'com.zsk.boot',
					artifactId: 'jpa-code-gen',
					codeText: "",
				}
			},
			methods: {
				addCol(index) {
					this.dbTable[index].tableCol.push({
						colName: "col1",
						colType: "String"
					});
				},
				removeCol(index, rowIndex) {
					this.dbTable[index].tableCol.splice(rowIndex, 1)
				},
				removeColUp(index, rowIndex) {
					if (rowIndex <= 0)
						return
					let colList = this.dbTable[index].tableCol
					let tmp = colList[rowIndex - 1]
					Vue.set(colList, rowIndex - 1, colList[rowIndex]);
					Vue.set(colList, rowIndex, tmp);
				},
				removeColDown(index, rowIndex) {
					let colList = this.dbTable[index].tableCol
					if (rowIndex + 1 >= colList.length)
						return
					let tmp = colList[rowIndex + 1]
					this.$set(colList, rowIndex + 1, colList[rowIndex]);
					this.$set(colList, rowIndex, tmp);
				},
				addTable() {
					this.dbTable.push({
						tableName: "demoInfo",
						tableCol: [{
							colName: "userName",
							colType: "String"
						}]
					})
				},
				removeTable(index) {
					this.dbTable.splice(index, 1)
				},
				genCode() {
					let tableNames = []
					let len = this.dbTable.length
					for (let i = 0; i < len; i++) {
						let name = this.dbTable[i].tableName
						if (tableNames.indexOf(name) > -1) {
							alert("表名" + name + "重复")
							return
						}
						tableNames.push(name)
						let colList = this.dbTable[i].tableCol
						let colLen = colList.length
						let colNames = []
						for (let j = 0; j < colLen; j++) {
							let colName = colList[j].colName
							if (colNames.indexOf(colName) > -1) {
								alert("表" + name + "中列名" + colName + "重复")
								return
							}
							colNames.push(colName)
						}
					}
					axios.post("/api/gen/code?packageName=" +
						this.packageName + "&groupId=" + this.groupId + "&artifactId=" + this.artifactId, this.dbTable).then(reponse => {
						location.href = "/api/gen/" + this.artifactId
					}).catch(error => {
						alert("操作失败" + error)
					})
				},
				getEntity(index){
					let tableInfo = this.dbTable[index]
					if(!this.checkColName(tableInfo)){
						return
					}
					let url = "/api/gen/code/entity?packageName=" + this.packageName + "&artifactId=" + this.artifactId
					axios.post(url,tableInfo).then(response => {
					    this.codeText = response.data
					}).catch(error => {
						alert("操作失败" + error)
					}).finally(()=>{
						
					})
				},
				getRepository(index){
					let tableInfo = this.dbTable[index]
					if(!this.checkColName(tableInfo)){
						return
					}
					let url = "/api/gen/code/repository?packageName=" + this.packageName + "&artifactId=" + this.artifactId
					axios.post(url,tableInfo).then(response => {
					    this.codeText = response.data
					}).catch(error => {
						alert("操作失败" + error)
					}).finally(()=>{
						
					})
				},
				getService(index){
					let tableInfo = this.dbTable[index]
					if(!this.checkColName(tableInfo)){
						return
					}
					let url = "/api/gen/code/service?packageName=" + this.packageName + "&artifactId=" + this.artifactId
					axios.post(url,tableInfo).then(response => {
					    this.codeText = response.data
					}).catch(error => {
						alert("操作失败" + error)
					}).finally(()=>{
						
					})
				},
				checkColName(tableInfo){
					let colList = tableInfo.tableCol
					let colLen = colList.length
					let colNames = []
					for (let i = 0; i < colLen; i++) {
						let colName = colList[i].colName
						if (colNames.indexOf(colName) > -1) {
							alert("表" + tableInfo.tableName + "中列名" + colName + "重复")
							return false;
						}
						colNames.push(colName)
					}
					return true;
				}
			}
		})
		

	</script>

</html>
